<template>
  <t-drawer
    v-model:visible="props.visible"
    :footer="false"
    size="468px"
    class="drawer-box"
  >
    <template #header>
      <div class="drawer-header">
        <div class="header-left flex">
          <img src="@/assets/icon-ai-logo.png" class="icon" />AI实验助理
        </div>
        <div class="header-right flex" @click="handleHide">
          <img src="@/assets/icon-ai-close.png" class="icon" />
        </div>
      </div>
    </template>
    <div class="chat-box">
      <div class="chat-list" ref="chatRef">
        <template v-for="(item, index) in chatList" :key="index">
          <div class="chat-item ai" v-if="item.isAI">
            <div class="chat-logo"></div>
            <div class="chat-text">
              {{ item.text }}
              <img
                class="loading"
                v-if="showLoding && index == 4"
                src="@/assets/icon-ai-loading.png"
              />
            </div>
          </div>
          <div class="chat-item user" v-else>
            <div class="chat-text">{{ item.text }}</div>
          </div>
        </template>
        <div class="step-box" v-if="showReport">
          <div class="step-content">
            <div class="step-row">
              <div class="step-label">标题</div>
              <div class="line"></div>
              <div class="step-text">
                <h2>《迈克尔逊干涉实验》实验报告</h2>
              </div>
            </div>
            <div
              class="step-row"
              v-for="(item, index) in repotStepData"
              :key="index"
            >
              <div class="step-label">{{ item.label }}</div>
              <div class="line"></div>
              <div class="step-text">
                <h3>{{ item.title }}</h3>
                <p>{{ item.content }}</p>
              </div>
            </div>
          </div>
          <div class="step-buttons" :class="{ disabled: disabled == true }">
            <div class="step-btn" @click="handleRepty">重新生成大纲</div>
            <div class="step-btn blue" @click="handleReport">生成报告</div>
          </div>
        </div>
        <div class="report-box" v-if="showReportBtn">
          <div class="report-content">
            <div class="report-icon"></div>
            <div class="content">
              <div class="report-title">
                《迈克尔逊干涉实验》实验报告.docx
                <span class="time">约需10分钟</span>
              </div>
              <div class="report-loadding">
                <div class="loadding" :style="`width: ${width}%`"></div>
              </div>
            </div>
          </div>
          <div class="report-btn"></div>
        </div>
      </div>
      <div class="chat-send-box">
        <div class="chat-opt">
          <div class="chat-opt-item" @click="handleShowPoupList">
            <img src="@/assets/icon-ai-time.png" class="icon" />
            对话记录
          </div>
          <div class="chat-opt-item" @click="handleNew">
            <img src="@/assets/icon-ai-dialog.png" class="icon" />
            开启新对话
          </div>
        </div>
        <div class="chat-send">
          <div class="chat-send-input">
            <textarea
              v-model="userText"
              class="textarea"
              placeholder="给AI助手发送消息"
              @keyup.enter="handleSend"
            ></textarea>
          </div>
          <div class="chat-send-btn">
            <div class="chat-mode">
              <div class="chat-mode-item">
                <img src="@/assets/icon-ai-footer-1.png" class="icon" />深度思考
                R1
              </div>
              <div class="chat-mode-item">
                <img src="@/assets/icon-ai-footer-2.png" class="icon" />联网搜索
              </div>
            </div>

            <div class="send-btn" @click="handleSend"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="poup-box" v-if="showPoupList">
      <div class="poup-content">
        <div class="poup-header">
          <div class="poup-title">对话记录</div>
          <div class="poup-close" @click="handleHidePoupList"></div>
        </div>
        <div class="poup-list">
          <div
            class="poup-item"
            v-for="(item, index) in poupListData"
            :key="index"
          >
            <div class="poup-item-title">{{ item.title }}</div>
            <div class="poup-item-content" v-if="item.content.length > 0">
              <div
                class="poup-col"
                v-for="(list, key) in item.content"
                :key="key"
              >
                {{ list.text }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="poup-bg"></div>
    </div>
  </t-drawer>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from "vue";
const emit = defineEmits(["hideDrawer"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
const userText = ref("");
const chatList: any = ref([]);
const chatIndex = ref(0);
const chatAiList = ref([
  {
    text: "Hi，我是你的AI实验助手，很高兴见到你！",
  },
  {
    text: "抱歉，本次实验数据不足，您可以完成完整的实验操作和实验数据记录后再生成实验报告，也可以调用上一次完整实验操作和数据生成报告",
  },
  {
    text: "正在为您生成实验报告大纲。",
  },
]);
const aiIndex = ref(0);
//把一句话拆分成多个片段，模拟AI回答的停顿效果
const splitText = (text: string, chat: any) => {
  let result = text.split("");
  for (let i = 0; i < result.length; i += 2) {
    setTimeout(() => {
      chat.text += result[i] + (result[i + 1] || "");
    }, i * 100);
  }
};

const showReport = ref(false);

const handleSend = () => {
  if (userText.value) {
    let params = {
      text: userText.value,
      isAI: false,
    };
    chatList.value.push(params);
    chatIndex.value++;
    userText.value = "";
    setTimeout(() => {
      mockAiAnser();
    }, 1000);
  }
};
const chatRef: any = ref(null);
//滚动到底部
const scrollToBottom = async () => {
  await nextTick(); // 等待DOM更新完成
  if (chatRef.value) {
    chatRef.value.scrollTop = chatRef.value.scrollHeight;
  }
};
const repotStepData: any = ref([]);
const stepData = ref([
  {
    label: "第一章",
    title: "实验目的",
    content: "明确实验的核心目标，并帮助理解实验的理论意义与实际应用价值",
  },
  {
    label: "第二章",
    title: "实验仪器和器材",
    content: "明确本实验用到的实验仪器或器材",
  },
  {
    label: "第三章",
    title: "实验原理",
    content:
      "解释实验的理论基础，说明现象背后的科学规律，使实验操作与理论知识紧密结合",
  },
  {
    label: "第四章",
    title: "实验内容",
    content:
      "详细描述实验的操作步骤，包括实验前的准备、实验过程以及实验注意事项等",
  },
  {
    label: "第五章",
    title: "数据处理",
    content: "对实验数据进行整理、计算和分析，验证理论或得出结论",
  },
  {
    label: "第六章",
    title: "实验总结",
    content: "归纳实验结果，分析误差来源，讨论实验的优缺点",
  },
]);
const reportStepIndex = ref(0);

const handleStepData = async () => {
  try {
    for (const step of stepData.value) {
      let content = "";
      const chars = step.content.split("");
      repotStepData.value.push({
        label: step.label,
        title: step.title,
        content,
      });
      for (let i = 0; i < chars.length; i++) {
        await new Promise((resolve) => setTimeout(resolve, 200));
        content += chars[i];
        repotStepData.value[repotStepData.value.length-1].content = content;

      }
      // 在当前步骤的所有内容加载完成后，滚动到底部
      scrollToBottom();
      if (repotStepData.value.length === 6) {
        disabled.value = false;
      }
      // 等待1秒钟，再开始加载下一个步骤的内容
      await new Promise((resolve) => setTimeout(resolve, 1000));
    }
  } catch (error) {
    console.error("Error handling step data:", error);
  }
};
const showLoding = ref(false);
const mockAiAnser = async () => {
  if (aiIndex.value >= chatAiList.value.length) return;
  let params = {
    text: "",
    isAI: true,
  };
  chatList.value.push(params);
  splitText(
    chatAiList.value[aiIndex.value].text,
    chatList.value[chatIndex.value]
  );

  aiIndex.value++;
  chatIndex.value++;
  if (aiIndex.value == 3) {
    setTimeout(() => {
      showLoding.value = true;
    }, 2000);

    setTimeout(async () => {
      showReport.value = true;
      disabled.value = true;

      scrollToBottom();
      await handleStepData();
      showLoding.value = false;
    }, 4000);
  }
};
const handleRepty = () => {
  reportStepIndex.value = 0;
  showReport.value = false;
  showLoding.value = true;
  showReportBtn.value = false;
  repotStepData.value = [];
  setTimeout(async () => {
    showReport.value = true;
    disabled.value = true;
    scrollToBottom();
    await handleStepData();
    showLoding.value = false;
  }, 4000);
};
const disabled = ref(false);
const showReportBtn = ref(false);
const width: any = ref(0);
const timer: any = ref(null);
const handleReport = () => {
  disabled.value = true;
  showReportBtn.value = true;
  scrollToBottom();
  timer.value = setInterval(() => {
    if (width.value >= 90) {
      clearInterval(timer.value);
      disabled.value = false;
    } else if (width.value > 0 && width.value < 20) {
      width.value = `${Number(width.value) + 0.042}`;
    } else {
      width.value = `${Number(width.value) + 0.583}`;
    }
  }, 1000);
};
watch(
  () => props.visible,
  (val) => {
    if (val) {
      aiIndex.value = 0;
      chatIndex.value = 0;
      reportStepIndex.value = 0;
      clearInterval(timer.value);
      chatList.value = [];
      mockAiAnser();
    }
  },
  {
    immediate: true,
  }
);
const handleNew = () => {
  aiIndex.value = 0;
  chatIndex.value = 0;
  chatList.value = [];
  showReport.value = false;
  disabled.value = false;
  mockAiAnser();
};

const handleHide = () => {
  emit("hideDrawer");
};

const showPoupList = ref(false);
const poupListData = ref([
  {
    title: "今天",
    content: [{ text: "您好" }, { text: "您知道什么是噔噔噔？" }],
  },
  {
    title: "昨天",
    content: [{ text: "您好" }, { text: "您知道什么是噔噔噔？" }],
  },
  {
    title: "7天内",
    content: [{ text: "如果您需要帮助，请随时告诉我。" }],
  },
  {
    title: "30天内",
    content: [
      { text: "后天是周一，您可以开始新的一周的工作。" },
      { text: "如果您需要帮助，请随时告诉我。" },
    ],
  },
]);
const handleShowPoupList = () => {
  showPoupList.value = true;
};

const handleHidePoupList = () => {
  showPoupList.value = false;
};
</script>
<style>
.t-drawer--open > .t-drawer__content-wrapper {
  border: 1px solid #e6ebf1;
  box-shadow: 12px -12px 12px 0 #00111e08, -12px 12px 12px 0 #00111e08;
  border-radius: 12px;
  height: calc(100% - 84px);
  top:65px;
  right:16px;
}
</style>
<style lang="less" scoped>
.drawer-box {
  .poup-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 99;
    .poup-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.4);
      z-index: 100;
    }
    .poup-content {
      z-index: 101;
      position: absolute;
      top: 0;
      left: 0;
      width: 360px;
      height: 100%;
      background: #ffffff;
      border-radius: 12px 0 0 12px;
      box-sizing: border-box;
      padding: 16px;
      .poup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .poup-title {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 16px;
          color: #262930;
        }
        .poup-close {
          background: url(@/assets/icon-close.png) no-repeat center;
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
      .poup-list {
        height: calc(100% - 128px);
        overflow-y: auto;
        .poup-item {
          .poup-item-title {
            margin-top: 20px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 14px;
            color: #262626;
            line-height: 16px;
            padding: 0 12px;
            margin-bottom: 9px;
          }
          .poup-item-content {
            .poup-col {
              line-height: 36px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              font-size: 14px;
              color: #595959;
              width: 328px;
              box-sizing: border-box;
              padding: 0 12px;
              height: 36px;
              cursor: pointer;
              &:hover {
                background: #deeafe;
                border-radius: 8px;
              }
            }
          }
        }
      }
    }
  }
}
.drawer-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  .flex {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .header-left {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
    background: linear-gradient(90deg, #766cef 0%, #5688f7 100%);
    -webkit-background-clip: text;
    color: transparent;

    .icon {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
  }
  .header-center {
    font-family: FZZYJW--GB1-0;
    font-weight: 400;
    font-size: 12px;
    color: #262626;
  }
  .header-right {
    width: 32px;
    height: 32px;
    .icon {
      width: 32px;
      height: 32px;
    }
  }
}
.chat-box {
  height: 100%;
  .chat-list {
    height: calc(100% - 188px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 16px;
    .chat-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;
      .chat-text {
        padding: 8px;
        background: #eee;
        border-radius: 4px;
        max-width: calc(100% - 88px);
        .loading {
          vertical-align: middle;
          //180度旋转动画效果
          animation: rotate 3s linear infinite;
        }
        @keyframes rotate {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      }
      &.ai {
        justify-content: flex-start;
        .chat-logo {
          width: 32px;
          height: 32px;
          background: #e0f2ff;
          border-radius: 50%;
          margin-right: 8px;
        }
        .chat-text {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          background: #f3f4f6;
          border-radius: 0 8px 8px 8px;
        }
      }
      &.user {
        justify-content: flex-end;
        .chat-text {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #fff;
          background: #2776ff;
          border-radius: 0 8px 8px 8px 0;
        }
      }
    }
    .report-box {
      width: 374px;
      height: 62px;
      background: #ffffff;
      border: 0.5px solid #bec4ca;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 15px 16px;
      margin-left: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .report-content {
        display: flex;
        align-items: center;
        .report-icon {
          width: 28px;
          height: 32px;
          margin-right: 8px;
        }
        .content {
          .report-title {
            display: flex;
            margin-bottom: 9px;
            align-items: center;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 12px;
            color: #262626;
            line-height: 16px;
            .time {
              font-family: PingFangSC-Regular;
              font-weight: 400;
              font-size: 12px;
              color: #bfbfbf;
              line-height: 16px;
              margin-left: 6px;
            }
          }
          .report-loadding {
            width: 230px;
            height: 6px;
            background: #e6ebf1;
            border-radius: 3px;
            .loadding {
              width: 5px;
              height: 6px;
              background: #2776ff;
              border-radius: 3px;
            }
          }
        }
      }
      .report-btn {
        width: 28px;
        height: 28px;
        background: #2776ff url(@/assets/icon-ai-down.png) no-repeat center;
        border-radius: 50%;
        opacity: 0.5;
      }
    }
    .step-box {
      padding: 8px;
      margin-bottom: 12px;
      background: #eee;
      border-radius: 4px;
      margin-left: 42px;
      .step-content {
        overflow: hidden;
        .step-row {
          display: flex;
          align-items: flex-start;
          box-sizing: border-box;
          justify-content: center;
          position: relative;
          padding: 6px 0;

          .step-label {
            text-align: right;
            box-sizing: border-box;
            padding-right: 8px;
            width: 14%;
            font-size: 13px;
          }
          .line {
            position: absolute;
            top: 10px;
            left: calc(14% + 11px);
            width: 1px;
            height: 100%;
            background: #2776ff;

            &::after {
              position: absolute;
              top: 0;

              content: "";
              width: 11px;
              height: 11px;
              border-radius: 50%;
              display: block;
              margin-left: -5px;

              border: 1px solid #2776ff;
              background: #fff;
            }
            &::before {
              position: absolute;
              top: 0;
              left: 50%;
              content: "";
              width: 7px;
              height: 7px;
              border-radius: 50%;
              display: block;
              background: #2776ff;
              margin-left: -3px;
              margin-top: 3px;
              z-index: 1;
            }
          }
          .step-text {
            width: calc(100% - 14% - 11px);
            box-sizing: border-box;
            padding-left: 22px;
            h2 {
              font-size: 16px;
              margin: 0;
            }
            h3 {
              font-size: 13px;
              margin: 0;
            }
            p {
              font-size: 12px;
              margin: 0;
            }
          }
        }
      }
      .step-buttons {
        border-top: 1px solid #bec4ca;
        margin: 0 12px;
        display: flex;
        align-items: center;
        padding: 8px 0 4px;
        &.disabled {
          opacity: 0.4;
        }
        .step-btn {
          padding: 6px 8px;
          background: #ffffff;
          border: 1px solid #e6ebf1;
          border-radius: 4px;
          line-height: 16px;
          cursor: pointer;
          color: #262626;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          margin-right: 12px;
          font-size: 12px;
          &.blue {
            background: #2776ff;

            color: #ffffff;
          }
        }
      }
    }
  }
}
.chat-send-box {
  .chat-opt {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .chat-opt-item {
      height: 32px;
      padding: 0 12px;
      background: #ffffff;
      border: 1px solid #e8e9ed;
      border-radius: 4px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #262626;
      display: flex;
      align-items: center;
      margin-right: 12px;
      cursor: pointer;
      .icon {
        width: 20px;
        height: 20px;
      }
    }
  }
}
.chat-send {
  width: 436px;
  height: 130px;
  background: #f5f4f4;
  border: 1px solid #e6ebf1;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 12px;
  .chat-send-input {
    height: 72px;
    overflow: hidden;
    .textarea {
      height: 110%;
      width: 100%;
      margin: 0;
      padding: 0;
      background: none;
      border: 0;
      outline: none;
    }
  }
  .chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .chat-mode {
      display: flex;
      align-items: center;
      .chat-mode-item {
        height: 28px;
        background: #ffffff;
        border: 1px solid #e6ebf1;
        border-radius: 15px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #262626;
        margin-right: 12px;
        cursor: pointer;
        .icon {
          width: 16px;
          height: 16px;
        }
      }
    }
    .send-btn {
      width: 36px;
      height: 36px;
      cursor: pointer;
      background: url(@/assets/icon-ai-send.png) no-repeat;
    }
  }
}
</style>
